<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>收集组管理</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}"/>

    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
    <script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
    <script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}" crossorigin="anonymous"></script>
    <style>
        body {
            padding: 10px;
        }
        #groupsList {
            padding-left:30px ;
            padding-top: 30px;
        }
        #groupsList a,.groups_name,.group_name {
            margin-right: 20px;
            cursor: pointer;
        }
        .removeGroupsButton,.removeGroupItemButton {
            color: red;
        }
        ul > li {
            margin: 6px 0px;
            display: flex;
            justify-items: center;
        }
        li a {
            text-decoration:none
        }
        ul li::before {
            content: "";
            position: relative;
            transform: translate(-136%, 140%);
            border-radius: 50%;
            width: 0.4rem;
            height: 0.4rem;
            background: #46525a;
        }
        .groups {
            display: flex;
            width: 100%;
            background: #f5f5f5;
            padding: 5px 10px;
            box-sizing: border-box;
            margin-bottom: 3px;

        }
        .groups_name,.group_name {
            display: inline-block;
            width: 200px;
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 使用省略号 */
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" id="addGroupsButton"><i class="fa fa-plus"></i>添加集合</button>

    <div id="groupsList">

    </div>

    <div class="modal fade" id="modalBox" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalBody">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary"  id="modalConfirm">确认</button>
                </div>
            </div>
        </div>
    </div>


    <script type="module">
        import {POST,GET,POST_FORM} from "/js/request.js";

        import {bootstrapModalController} from "/js/bootstrapModalController.js";

        function refreshGroupsList() {
            let groupsListBox = $("#groupsList");
            // 选清空内容
            groupsListBox.html('')
            GET(`/groups/getGroupsTree`).then(result=>{
                if (result.success) {
                    result.data.forEach(groups=>{
                        let treeTable = ``;
                        treeTable += `<p  groups_id="${groups.id}" groups_name="${groups.name}" class="groups">
                                        <span class="groups_name" title="${groups.name}">${groups.name}</span>
                                        <a  class="addGroupItemButton">添加收集组</a>
                                        <a  class="renameGroupsButton">重命名</a>
                                        <a class="removeGroupsButton">删除集合</a>
                                        </p>
                                    <ul style="display: ${(groups.groupList == null || groups.groupList.length == 0)?'none':'block'}">`;
                        if (groups.groupList != null) {
                            groups.groupList.forEach(groupItem=>{
                                treeTable += `<li group_id="${groupItem.id}" group_name="${groupItem.name}">
                                                <span class="group_name" title="${groupItem.name}">${groupItem.name}</span>
                                                <a  class="copyInvitationCodeButton">
                                                    <i class="fa fa-copy" aria-hidden="true" /></i> 复制邀请码
                                                </a>
                                                <a  class="renameGroupButton">重命名</a>
                                                <a  class="removeGroupItemButton">删除收集组</a>
                                              </li>`
                            })
                        }
                        treeTable += `</ul>`;
                        // 追加显示集合
                        groupsListBox.append(treeTable)
                    })

                }
            })
        }
        // 初始化列表
        refreshGroupsList();
        // 添加集合
        $("#addGroupsButton").click(function () {
            bootstrapModalController(
                {modalBox: "#modalBox",modalTitle:"#modalTitle",modalBody:"#modalBody",modalConfirm:"#modalConfirm"}
                ,"添加集合",`
                    <div class="form-group">
                        <label for="collectInput">集合名：</label>
                        <input type="text" class="form-control" id="collectInput" name="groupsName" placeholder="请输入要创建的集合名...">
                    </div>
                `,
            function (close,{groupsName}){
                POST(`/groups/add/${groupsName}`).then(result=>{
                    if( result.success) {
                        refreshGroupsList();
                        close()
                    }else {
                        // 添加失败
                        alert("添加失败"+result.message)
                    }
                })
            })
        })
        // 添加收集组
        $("#groupsList").on("click",".addGroupItemButton",function (event) {
            let status = -1;
            let groupsId = $(this).parent().attr("groups_id");
            bootstrapModalController(
                {modalBox: "#modalBox",modalTitle:"#modalTitle",modalBody:"#modalBody",modalConfirm:"#modalConfirm"}
            ,"添加收集组",`
                    <div class="form-group">
                        <label for="collectInput">收集组名：</label>
                        <input type="text" class="form-control" id="groupItemNameInput" name="group_name" placeholder="请输入收集组名...">
                    </div>
                    <div class="modal-body" id="create_success_tis" style="display: none">
                        <div class="alert alert-success" role="alert" style="cursor: pointer" id="copy">
                            创建成功，<span><i class="fa fa-clone" ></i>点击复制邀请码</span>
                        </div>
                    </div>
            `,function (close,{group_name}) {
                    if (status == 1) {
                        close()
                        status = -1;
                    }
                    POST("/groupItem/create",{
                        groupsId: parseInt(groupsId),
                        groupItemName: group_name
                    }).then(result=>{
                        if (result.success) {
                            refreshGroupsList();
                            $("#create_success_tis").css({
                                display: "block"
                            })
                            // 放置邀请码
                            $("#create_success_tis #copy").click(function (){
                                let code = result.data;
                                navigator.clipboard.writeText(code)
                                close()
                                status = -1;
                            })
                            status = 1;
                        }
                    })
            })
            // 阻止默认事件
            event.preventDefault();
        })
        $("#groupsList").on("click",".removeGroupsButton",function (event) {
            let groupsId = $(this).parent().attr("groups_id");
            bootstrapModalController(
                {modalBox: "#modalBox",modalTitle:"#modalTitle",modalBody:"#modalBody",modalConfirm:"#modalConfirm"}
                ,"集合删除确认",`
                   <p>确定要删除此集合吗？</p>
                `,
                function (close,{}){
                    POST(`/groups/remove/${groupsId}`).then(result=>{
                        // 刷新列表
                        if (result.success) {
                            refreshGroupsList();
                            close()
                        }else {
                            alert("删除失败！");
                        }
                    })
                })
            // 阻止默认事件
            event.preventDefault();
        })
        // 重命名组集合
        $("#groupsList").on("click",".renameGroupsButton",function (event) {
            let groupsId = $(this).parent().attr("groups_id");
            let oldGroupsName = $(this).parent().attr("groups_name");
            bootstrapModalController(
                {modalBox: "#modalBox",modalTitle:"#modalTitle",modalBody:"#modalBody",modalConfirm:"#modalConfirm"}
                ,"重命名组集合",`
                    <div class="form-group">
                        <label for="groupsNewName">新的组集合名：</label>
                        <input type="text" class="form-control" id="groupsNewName" name="groupsNewName" value="${oldGroupsName}" placeholder="请输入新的组集合名...">
                    </div>
                `,function (close,{groupsNewName}) {
                    POST("/groups/rename",{groupsId:parseInt(groupsId), newName:groupsNewName}).then(result=>{
                        if (result.success) {
                            refreshGroupsList();
                            close()
                        }else {
                            alert("重命名组集合失败！"+result.message)
                        }
                    })
                })
            // 阻止默认事件
            event.preventDefault();
        })

        // 重命名组
        $("#groupsList").on("click",".renameGroupButton",function (event) {
            let groupId = $(this).parent().attr("group_id");
            let oldGroupName = $(this).parent().attr("group_name");
            bootstrapModalController(
                {modalBox: "#modalBox",modalTitle:"#modalTitle",modalBody:"#modalBody",modalConfirm:"#modalConfirm"}
                ,"重命名组集合",`
                    <div class="form-group">
                        <label for="groupNewName">新的组名：</label>
                        <input type="text" class="form-control" id="groupNewName" name="groupNewName" value="${oldGroupName}" placeholder="请输入新的组集合名...">
                    </div>
                `,function (close,{groupNewName}) {
                    POST("/groupItem/rename",{groupId:parseInt(groupId), newName:groupNewName}).then(result=>{
                        if (result.success) {
                            refreshGroupsList();
                            close()
                        }else {
                            alert("重命名组失败！"+result.message)
                        }
                    })
                })
            // 阻止默认事件
            event.preventDefault();
        })

        // 删除收集组
        $("#groupsList").on("click",".removeGroupItemButton",function (event) {
            let groupItemId = $(this).parent().attr("group_id")
            bootstrapModalController(
                {modalBox: "#modalBox",modalTitle:"#modalTitle",modalBody:"#modalBody",modalConfirm:"#modalConfirm"}
                ,"收集组删除确认",`
                   <p>确定要删除吗？</p>
                `,
                function (close,{}){
                    POST(`/groupItem/remove/${groupItemId}`).then(result=>{
                        if (result.success) {
                            refreshGroupsList();
                            close()
                        }else {
                            alert("删除失败");
                        }
                    })
                })
            // 阻止默认事件
            event.preventDefault();
        })

        $("#groupsList").on("click",".copyInvitationCodeButton",function (event) {
            let groupItemId = $(this).parent().attr("group_id")
            GET("/groupItem/getInvitationCode",{groupId:parseInt(groupItemId)}).then(result=>{
                if (result.success) {
                    navigator.clipboard.writeText(result.data)
                    alert("复制组邀请码成功！")
                }else {
                    alert("获取邀请码失败，请重试！")
                }
            })

            // 阻止默认事件
            event.preventDefault();
        })
    </script>
</body>
</html>